<template>
  <div class="g-flex statistic-wrap">
    <div v-if="!$slots.icon" class="statistic-icon">
      <img
        v-if="props.imgIcon"
        class="img"
        :src="require(`@/assets/images/${props.imgIcon}.png`)"
      />
    </div>
    <slot name="icon"></slot>
    <slot name="tag"></slot>
    <div>
      <div class="g-font-14n2"
        >{{ empty(props.title) }}
        <el-tooltip :content="props.tips" v-if="props.tips">
          <CIcon type="c-xian-shuoming" class="des-icon-pointer" @click="seeRule"></CIcon>
        </el-tooltip>
      </div>
      <slot name="desc"></slot>
      <p class="g-font-24n1 statistic-num" v-if="!$slots.desc">{{ empty(props.subtitle) }}</p>
    </div>
    <slot name="rightTitle"> </slot>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits } from 'vue';
import { empty } from '@/utils';
interface IStatisticProps {
  title: string;
  subtitle: string | number;
  tips?: string;
  imgIcon?: string;
  /**
   * 是否显示右侧内容
   */
  showRight?: boolean;
  /**
   * 右侧标题
   */
  rightTitle?: string;
  /**
   * 右侧标题tips
   */
  rightTitleTips?: string;
  /**
   * 右侧内容
   */
  rightValue?: string | number;
  desc?: string;
}
const props = withDefaults(defineProps<IStatisticProps>(), {
  title: '',
  subtitle: '',
  showRight: false
});
const emits = defineEmits(['tipClick']);
const seeRule = () => {
  emits('tipClick');
};
</script>
<style lang="scss" scoped>
@use '../styles/index.scss' as *;
</style>
